<template>
  <div class="society-container">
    <div class="society-operational">
      <el-input placeholder="请输入社团名" v-model="societyName" style="width: 300px;">
        <el-button slot="append" type="primary" class="el-input-button" @click="addSociety">添加新社团</el-button>
      </el-input>
      <!-- 搜索框 -->
      <el-input placeholder="搜索社团" v-model="searchInput" style="width: 400px;margin: 0 20px">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-button type="danger" style="margin-left: 20px" @click="deleteSociety(selectedData)">删除选中</el-button>
    </div>

    <!--  展示社团数据  -->
    <el-table
        :data="societyInfo"
        stripe
        border
        style="width: 100%;margin: 20px 0"
        :default-sort="{prop: 'creationTime', order: 'descending'}"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55"
          align="center">
      </el-table-column>
      <el-table-column
          prop="id"
          label="id"
          width="80"
          align="center">
      </el-table-column>
      <el-table-column
          label="创建日期"
          prop="creationTime"
          >
        <template v-slot="{row}">
          <span>{{ $dayjs(row.creationTime * 1).format('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="title"
          label="社团名">
      </el-table-column>
      <el-table-column
          prop="total"
          label="现有社员">
      </el-table-column>
      <el-table-column
          label="操作">
        <template v-slot="{row}">
          <el-button>查看详细</el-button>
          <el-button type="danger" @click="deleteSociety([row.id])">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--  分页器  -->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pagination.limit"
        :total="societyNum || 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.pageNo"
        style="text-align: center">
    </el-pagination>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {mapGetters} from "vuex";

export default {
  name: "Society",
  data() {
    return {
      societyName: '',
      selectedData: [], // 被选中的数据
      searchInput:'',
      // 分页器数据
      pagination: {
        limit: 10,
        pageNo: 1
      }
    }
  },
  mounted() {
    this.getSocietyInfo()
  },
  methods: {
    dayjs,
    async addSociety() {
      let societyName = this.societyName.trim();
      if (societyName) {
        this.$store.dispatch('society/addNewSociety', societyName).then(() => {
          this.$message.success('添加成功')
          this.societyName = ''
          this.getSocietyInfo()
        })
      }
    },
    getSocietyInfo() {
      let {pageNo, limit} = this.pagination;
      this.$store.dispatch('society/getInfo', {pageNo, limit}).then(() => {
        this.pagination.total = this.$store.getters.societyNum
      })
    },
    // 改变选中的数据
    handleSelectionChange(rows) {
      let selectedData = [];
      rows.forEach(item => {
        selectedData.push(item.id);
      });
      this.selectedData = selectedData; // 用中间变量改变data的值，让vue能响应
    },

    // 改变分页器每页size
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 改变分页器页数
    handleCurrentChange(val) {
      this.getSocietyInfo();
    },

    // deleteSociety
    deleteSociety(ids){
      this.$store.dispatch('society/delSociety',ids).then(()=>{
        this.getSocietyInfo();
      })
    },
  },
  computed: {
    ...mapGetters(['societyInfo', 'societyNum'])
  }
}
</script>

<style scoped lang="scss">
.society {
  &-container {
    padding: 30px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    height: 887px;

    .el-input-button {
      background-color: #409EFF;
      color: white;
      border-radius: 0;

      &:hover, &:focus {
        background-color: #66b1ff;
      }

      &:active {
        background-color: #428ac9;
      }
    }
  }

  &-operational {
    display: flex;
    flex-flow: row nowrap;
  }


}
</style>